.btn {
  @apply hover:bg-neutral-100;
  @apply relative py-2 px-4 rounded-t-md border-b-0 border border-solid border-neutral-300 aria-[selected=true]:border-b-0;
  @apply dark:hover:bg-neutral-800;
}

.btn[aria-selected="true"] {
  box-shadow: inset 0 -1px 0px 0px var(--color-foreground);
}

.btn[aria-selected="true"]::after {
  content: "";
  position: absolute;
  width: 100%;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 4px;
  background-color: var(--color-background);
}

.btn[aria-selected="true"]:hover::after {
  @apply bg-neutral-100;
}

:global(body.dark) .btn[aria-selected="true"]:hover::after {
  @apply bg-neutral-800;
}
